<template>
  <back-dialog-base :title="title" :visible="visibleView" :hasFooter="false">
    <template #content>
      <div class="main">
        <div class="police">
          <div class="poli">
            <div class="police-title">
              <div class="police-svg">
                <svg-icon icon="product-alarm"></svg-icon>
              </div>
              <span class="police-fz">报警</span>
            </div>
            <div class="police-main">
              <div class="police-Dot">
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
              </div>
              <div class="police-text">
                <div class="text-time">
                  报警时间：{{ props.rowData.equipmenmonitorForm.alarmTime }}
                </div>
                <div class="text-time">
                  报警类型：<span style="color: #ffb403">{{
                    props.rowData.equipmenmonitorForm.alarmType
                  }}</span>
                </div>
              </div>
              <!-- 1 -->
            </div>
            <div class="analysis-main">
              <div class="police-title">
                <div>
                  <div class="police-svg" v-if="formInline.analyze">
                    <svg-icon icon="product-analyze"></svg-icon>
                  </div>
                  <div class="police-svg" v-else>
                    <svg-icon icon="product-unanalyze"></svg-icon>
                  </div>
                </div>
                <span
                  class="police-fz"
                  :style="
                    formInline.analyze
                      ? { color: '#1E6AE7' }
                      : { color: '#AEBBD3' }
                  "
                  >分析</span
                >
              </div>
              <div class="police-main">
                <div class="police-Dot" v-show="formInline.analyze">
                  <div class="police-D">
                    <span class="Dot"></span>
                  </div>
                  <div class="police-D">
                    <span class="Dot"></span>
                  </div>
                  <div class="police-D">
                    <span class="Dot"></span>
                  </div>
                  <div class="police-D">
                    <span class="Dot"></span>
                  </div>
                </div>
                <div class="police-Dot" v-show="!formInline.analyze">
                  <div class="police-D">
                    <span class="Dot2"></span>
                  </div>
                  <div class="police-D">
                    <span class="Dot2"></span>
                  </div>
                  <div class="police-D">
                    <span class="Dot2"></span>
                  </div>
                </div>
                <div class="police-text" v-show="formInline.analyze">
                  <div class="text-time">
                    分析结果：<span style="color: #f82b24">{{
                      formInline.analyze.dealStatus || ''
                    }}</span>
                  </div>
                  <div style="display: flex">
                    <div class="text-time">
                      分析人：{{ formInline.analyze.dealUser || '' }}
                    </div>
                    <div class="text-time" style="margin-left: 102px">
                      处置建议：{{ formInline.analyze.dealOpinion || '' }}
                    </div>
                  </div>
                  <div class="text-time">
                    分析时间：{{ formInline.analyze.dealTime || '' }}
                  </div>
                </div>
              </div>
            </div>
            <div class="management-main" v-show="formInline.analyze">
              <div class="police-title">
                <div class="police-svg" v-if="!formInline.dispose">
                  <svg-icon icon="product-undispose"></svg-icon>
                </div>
                <div class="police-svg" v-else>
                  <svg-icon icon="product-dispose"></svg-icon>
                </div>
                <span
                  class="police-fz"
                  :style="
                    formInline.dispose
                      ? { color: '#1E6AE7' }
                      : { color: '#AEBBD3' }
                  "
                >
                  处置</span
                >
              </div>
              <div class="police-main">
                <div class="police-Dot" v-show="formInline.dispose">
                  <div class="police-D">
                    <span class="Dot"></span>
                  </div>
                  <div class="police-D">
                    <span class="Dot"></span>
                  </div>
                  <div class="police-D">
                    <span class="Dot"></span>
                  </div>
                  <div class="police-D">
                    <span class="Dot"></span>
                  </div>
                  <div class="police-D">
                    <span class="Dot"></span>
                  </div>
                </div>
                <div class="police-Dot" v-show="!formInline.dispose">
                  <div class="police-D">
                    <span class="Dot2"></span>
                  </div>
                  <div class="police-D">
                    <span class="Dot2"></span>
                  </div>
                  <div class="police-D">
                    <span class="Dot2"></span>
                  </div>
                </div>
                <div class="police-text" v-show="formInline.dispose">
                  <div class="text-time">
                    处置时间：{{ formInline.dispose?.dealTime || '未知' }}
                  </div>
                  <div style="display: flex">
                    <div class="text-time">
                      处置结果：<span style="color: #1e6ae7">{{
                        formInline.dispose?.dealOpinion
                      }}</span>
                    </div>
                    <div class="text-time" style="margin-left: 125px">
                      处置人：{{ formInline.dispose?.dealUser || '未知' }}
                    </div>
                  </div>

                  <div class="text-time" style="display: flex">
                    <div style="display: flex; width: 135px; overflow: hidden">
                      附件：
                      <!-- <svg-icon
                      style="cursor: pointer"
                      icon="Photo"
                      @click="tp(formInline.dispose)"
                    ></svg-icon> -->
                      <div
                        class="image-preview"
                        v-for="item in props.photoList"
                        :key="item.id"
                      >
                        <el-image
                          style="width: 35px; height: 35px"
                          :src="item.file_url"
                          :preview-src-list="props.srcList"
                          :initial-index="3"
                          fit="cover"
                        />
                      </div>
                    </div>
                    <div>
                      <span style="margin-left: 60px"
                        >总计:{{ formInline.dispose.sum }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="Contact-main"
              v-show="formInline.dispose && formInline.analyze"
            >
              <div class="police-title">
                <div class="police-svg" v-show="formInline.lift">
                  <svg-icon icon="alarm-lift"></svg-icon>
                </div>
                <div class="police-svg" v-show="!formInline.lift">
                  <svg-icon icon="alarm-unlift"></svg-icon>
                </div>
                <span
                  class="police-fz"
                  :style="
                    formInline.lift
                      ? { color: '#1E6AE7' }
                      : { color: '#AEBBD3' }
                  "
                  >解除</span
                >
              </div>
              <div class="police-main">
                <div class="police-Dot" v-show="formInline.lift">
                  <div class="police-D">
                    <span class="Dot"></span>
                  </div>
                  <div class="police-D">
                    <span class="Dot"></span>
                  </div>
                  <div class="police-D">
                    <span class="Dot"></span>
                  </div>
                  <div class="police-D">
                    <span class="Dot"></span>
                  </div>
                </div>
                <div class="police-Dot" v-show="!formInline.lift">
                  <div class="police-D">
                    <span class="Dot2"></span>
                  </div>
                  <div class="police-D">
                    <span class="Dot2"></span>
                  </div>
                  <div class="police-D">
                    <span class="Dot2"></span>
                  </div>
                </div>
                <div class="police-text" v-show="formInline.lift">
                  <div class="text-time">
                    解除时间：{{ formInline.lift.dealTime || '' }}
                  </div>
                  <div class="text-time">
                    解除原因：<span style="color: #1e6ae7">{{
                      formInline.lift.dealOpinion || ''
                    }}</span>
                  </div>
                  <div class="text-time">
                    解除人：{{ formInline.lift.dealUser || '' }}
                  </div>
                </div>
              </div>
              <div class="police-title" v-show="formInline.lift">
                <div class="police-svg">
                  <svg-icon icon="product-finish"></svg-icon>
                </div>
                <span class="police-fz">已完成</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <!-- <el-dialog
          v-model="innerVisible"
          width="37%"
          title="处置照片"
          append-to-body
        > -->
        <!-- <div class="im" v-for="item in photoData" :key="item.id">
            <img :src="item.file_url" alt="" />
          </div> -->
        <!-- </el-dialog> -->
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import { defineProps, ref, watch, reactive } from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { equipmentQuery, photaQuery } from '@/api/monitor'
import { ElMessage } from 'element-plus'
const listData = ref({})
const photoData = ref({})
const innerVisible = ref(false)
const showDiaFlag = ref(true)
const srcList = ref([])
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleView: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  },
  alarmNo: {
    type: Object,
    default: () => {}
  },
  srcList: {
    type: Object,
    default: () => {}
  },
  photoList: {
    type: Object,
    default: () => {}
  }
})
const viewData = reactive({
  alarmNo: ''
})
const formInline = reactive({
  analyze: {},
  lift: {},
  dispose: {}
})

const list = async (alarmNo) => {
  // console.log(alarmNo)
  listData.value = await equipmentQuery(alarmNo)
  showDiaFlag.value = true
  formInline.analyze = listData.value.analyze ? listData.value.analyze : false
  formInline.dispose = listData.value.dispose ? listData.value.dispose : false
  formInline.lift = listData.value.lift ? listData.value.lift : false
   console.log(formInline.lift)
}
const tp = async () => {
  console.log(formInline.dispose)
  const res = await photaQuery(formInline.dispose.id)
  // console.log(res)
  res.forEach((item) => {
    srcList.value.push(item.file_url)
  })
  photoData.value = res
  innerVisible.value = true
}
watch(
  () => props.rowData,
  () => {
    tp()
  }
)
watch(
  () => props.alarmNo,
  () => {
    list(props.alarmNo)
  }
)
</script>

<style lang="scss" scoped>
.main {
  height: 100%;
  padding: 10px;
  .police {
    width: 100%;
    .police-title {
      position: relative;
      .police-svg {
        display: inline-block;
        width: 44px;
        height: 44px;
        :deep(.svg-icon) {
          width: 100%;
          height: 100%;
        }
      }
      .police-fz {
        position: absolute;
        top: 12px;
        left: 55px;
        color: #1e6ae7;
        font-size: 14px;
      }
    }
    .police-main {
      position: relative;
      width: 100%;
      .police-Dot {
        display: inline-block;
        width: 40px;
        .police-D {
          text-align: center;
          width: 100%;
          height: 26px;
        }
      }
      .police-text {
        position: absolute;
        top: 10px;
        display: inline-block;
        width: 450px;
        padding-top: 2px;
        .text-time {
          margin-bottom: 10px;
          color: #5d6c8e;
        }
      }
      .overPic {
        width: 100px;
        overflow: hidden;
        .image-preview {
          display: flex;
          margin-bottom: 10px;
          // flex-direction: row;
        }
      }
    }
    .analysis-main {
      width: 100%;
      height: 150px;
    }
    .management-main {
      width: 100%;
      height: 180px;
    }
    .Contact-main {
      width: 100%;
      height: 180px;
    }
  }
}
.Dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #1e6ae7;
  border-radius: 50%;
  opacity: 1;
}
.Dot2 {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #aebbd3;
  border-radius: 50%;
  opacity: 1;
}
.poli {
  height: 100%;
}
.main .police .police-main .text {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 0;
  .text-D {
    display: inline-block;
    height: 26px;
    width: 25px;
    margin-left: 18px;
  }
  .police-time {
    position: relative;
    top: 15px;
    margin-bottom: 10px;
    color: #5d6c8e;
  }
}
.text1 {
  margin-left: 40px;
}
.im {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-right: 20px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
